<template>
  <!-- 运营管理-计费管理页面 -->
  <el-row :gutter="20">
    <!-- 左侧树图 -->
    <el-col :span="6">
      <!-- 搜索框 -->
      <el-card>
        <el-input style="width: 80%" placeholder="请输入关键词" v-model="fileterText">
          <template #append>
            <el-button icon="Search"></el-button>
          </template>
        </el-input>
        
        <!-- 树图 -->
        <el-tree
          ref="treeRef"
          :data="cityData"
          :props="defaultProps"
          class="mt"
          style="max-width: 600px"
          show-checkbox
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </el-card>
    </el-col>
    <!-- 右侧信息展示 -->
    <el-col :span="18">
      <el-card>
        <!-- 标题 -->
        <template #header>
          <div class="card-header">
            <h3>{{ title }}计费模板</h3>
          </div>
        </template>

        <!-- form 表单组件 -->
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
          <!-- 模板名称 -->
          <el-form-item label="模板名称:" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入模板名称"
              style="max-width: 200px"
              :disabled="!title"
            ></el-input>
          </el-form-item>

          <!-- 时间区间 - 要循环的内容 -->
          <el-form-item
            :label="'时间区间' + (index + 1) + ':'"
            v-for="(timeSlot, index) in ruleForm.data"
            :key="index"
          >
            <!-- 开始时间 -->
            <el-col :span="8">
              <!-- data.0.startTime  =  ruleForm.data[0].startTime  假设循环是从0开始,他就会去 data 数组里面的第0个里面找 startTime 属性 -->
              <el-form-item
                label="开始时间:"
                :prop="'data.' + index + '.startTime'"
                :rules="{ required: true, message: '时间不能为空', trigger: 'blur' }"
              >
                <el-time-picker
                  v-model="timeSlot.startTime"
                  placeholder="选择开始时间"
                  style="width: 100%"
                  value-format="HH:mm:ss"
                  :disabled="!title"
                />
              </el-form-item>
            </el-col>

            <!-- 结束时间 -->
            <el-col :span="8">
              <el-form-item
                label="结束时间:"
                :prop="'data.' + index + '.endTime'"
                :rules="{ required: true, message: '时间不能为空', trigger: 'blur' }"
              >
                <el-time-picker
                  v-model="timeSlot.endTime"
                  placeholder="选择结束时间"
                  style="width: 100%"
                  value-format="HH:mm:ss"
                  :disabled="!title"
                />
              </el-form-item>
            </el-col>

            <!-- 电费 -->
            <el-col :span="8">
              <el-form-item
                label="电费:"
                :prop="'data.' + index + '.electricityFee'"
                :rules="{ required: true, message: '电费不能为空', trigger: 'blur' }"
              >
                <el-input
                  v-model="timeSlot.electricityFee"
                  placeholder="请输入电费"
                  style="width: 100%"
                  :disabled="!title"
                />
              </el-form-item>
            </el-col>
          </el-form-item>

          <!-- 按钮-添加时间区间 -->
          <el-button type="primary" class="mb" @click="addTimeSlot"
            >添加时间区间</el-button
          >

          <!-- 服务费 -->
          <el-form-item prop="service" label="服务费:">
            <el-input v-model="ruleForm.service" style="max-width: 200px" :disabled="!title" />
          </el-form-item>

          <!-- 停车费 -->
          <el-form-item prop="parking" label="停车费:">
            <el-input v-model="ruleForm.parking" style="max-width: 200px" :disabled="!title" />
          </el-form-item>

          <!-- 备注 -->
          <el-form-item prop="remarks" label="特殊备注:">
            <el-input v-model="ruleForm.remarks" type="textarea" :disabled="!title" />
          </el-form-item>

          <!-- 按钮-创建/重置 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm">创建</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
const fileterText = ref<string>("");

const defaultProps = {
  children: "children",
  label: "label",
};

import { cityApi } from "@/api/operation";
import type { ElTree } from "element-plus";
// 规定城市层级数据的类型
interface Tree {
  label: string;
  children?: Tree[];
}

const cityData = ref<Tree[]>([]);
onMounted(async () => {
  const { data } = await cityApi();
  console.log("城市层级数据：", data);
  cityData.value = data;
});

// 树图搜索过滤方法
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};
// 树图的ref
const treeRef = ref<InstanceType<typeof ElTree>>();

// 监听搜索框的值变化，进行树图过滤
watch(fileterText, (val) => {
  if (treeRef.value) {
    // @ts-ignore
    treeRef.value.filter(val);
  }
});

// 分割线,下面是计费模板的功能 --------------------------------------------------------------------------
import type { FormInstance, FormRules } from "element-plus";

// 定义 ruleForm 的类型
interface RuleFormType {
  name: string;
  service: string;
  parking: string;
  remarks: string;
  data: {
    startTime: string;
    endTime: string;
    electricityFee: number | string;
  }[];
}

// 标题-动态变化
const title = ref<string>("");
// form 表单的ref
const ruleFormRef = ref<FormInstance>();
// form 表单的校验规则
const rules = ref<FormRules<RuleFormType>>({
  name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
  service: [{ required: true, message: "请输入服务费", trigger: "blur" }],
  parking: [{ required: true, message: "请输入停车费", trigger: "blur" }],
  remarks: [{ required: true, message: "请输入备注", trigger: "blur" }],
});
// form 表单双向绑定的数据
const ruleForm = ref<RuleFormType>({
  name: "",
  service: "",
  parking: "",
  remarks: "",
  data: [
    {
      // 开始时间
      startTime: "",
      // 结束时间
      endTime: "",
      // 电费
      electricityFee: "",
    },
  ],
});

// 添加时间区间的方法
const addTimeSlot = () => {
  ruleForm.value.data.push({
    startTime: "",
    endTime: "",
    electricityFee: "",
  });
};

// 创建按钮的提交方法
const submitForm = () => {
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      console.log("提交的数据：", ruleForm.value);
    }
  });
};

// 树图节点点击事件
const handleNodeClick = (data: Tree) => {
  if (!data.children) {
    title.value = data.label + ": ";
    // 重置表单
    resetForm();
  } else {
    title.value = "";
  }
};

// 重置按钮的方法
const resetForm = () => {
  ruleFormRef.value?.resetFields();
};
</script>

<style scoped></style>
